
<template>
  <div class="button-demo">
    <MButton :loading="true" :gradient="true" :block="true" size="small" >small  gradient loading block</MButton>
    <MButton :loading="true" type="primary" :block="true" size="large" >large  gradient loading block</MButton>
    <MButton :loading="true" :gradient="true" :round="true" :block="true" size="large" >hotfil loading</MButton>
    <br />
    <MButton :loading="true" type="primary">primary loading</MButton>
    <MButton :loading="true" type="success">success loading</MButton>
    <MButton :loading="true" type="warning">warning loading</MButton>
    <MButton :loading="true" type="danger">danger loading</MButton>
    <MButton :loading="true" type="info">info loading</MButton>
    <br />
    <MButton :loading="true" type="text">text loading</MButton>
    <MButton :loading="true" type="link">link loading</MButton>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";

export default defineComponent({
  components: {
  }
})
</script>
<style>
.button-demo {
  padding: 10px;
}

.button-demo .m-button {
  margin-right: 8px;
  margin-bottom: 12px;
}

.bg-pink {
  background: #666;
}
</style>